<template>
    <div class="main">
        <div class="left">
            <div class="h1">{{ bridge_name }}</div>
            <div class="liebiao">
                <div class="divCicle">
                    <div class="bgflexc" style="background-position: left center">
                        <div class="title">桩基础</div>
                        <div class="inbloc">
                            <div class="textZ">
                                总数<span class="bigNumber">{{ count_2.all }}</span>
                            </div>
                            <div class="textZ">
                                完成率<span class="bigNumber">{{ count_2.wcl }}%</span>
                            </div>
                        </div>
                        <div class="inbloc">
                            <div class="textZ">
                                已施工<span class="bigNumber colorGreen">{{ count_2.ysg }}</span>
                            </div>
                            <div class="textZ">
                                未施工<span class="bigNumber colorRed">{{ count_2.wsg }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bgflexc" style="background-position: center center">
                        <div style="position: relative; left: 30px">
                            <div class="title">墩柱</div>
                            <div class="inbloc">
                                <div class="textZ">
                                    总数<span class="bigNumber">{{ count_1.all }}</span>
                                </div>
                                <div class="textZ">
                                    完成率<span class="bigNumber">{{ count_1.wcl }}%</span>
                                </div>
                            </div>
                            <div class="inbloc">
                                <div class="textZ">
                                    已施工<span class="bigNumber colorGreen">{{ count_1.ysg }}</span>
                                </div>
                                <div class="textZ">
                                    未施工<span class="bigNumber colorRed">{{ count_1.wsg }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bgflexc" style="background-position: right center">
                        <div style="position: relative; left: 30px">
                            <div class="title">梁</div>
                            <div class="inbloc">
                                <div class="textZ">
                                    总数<span class="bigNumber">{{ count_3.all }}</span>
                                </div>
                                <div class="textZ">
                                    完成率<span class="bigNumber">{{ count_3.wcl }}%</span>
                                </div>
                            </div>
                            <div class="inbloc">
                                <div class="textZ">
                                    已施工<span class="bigNumber colorGreen">{{ count_3.ysg }}</span>
                                </div>
                                <div class="textZ">
                                    未施工<span class="bigNumber colorRed">{{ count_3.wsg }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content_bottom">
                    <div class="content_bottom_top">
                        <div
                            @click="get_Schedule_FindScheduleBySubsection(item.id)"
                            v-for="(item, index) in duan"
                            :key="index"
                            class="content_bottom_top_felx"
                        >
                            <!-- <div class="yuan" style="visibility: hidden"></div> -->
                            <div :class="{ textColor: item.isShow }" style="display: inline-block">{{ item.duan }}</div>
                        </div>
                    </div>
                    <div id="schart5">
                        <div class="centent_bottom_bottom">
                            <div style="display: flex; position: relative" v-for="(item, index) in duanShow" :key="index">
                                <div style="margin-right: 10px; position: relative">
                                    <span class="span_name">{{ item.bridge_pier }}</span>
                                    <img
                                        src="../../assets/img/jdall/pin3.png"
                                        v-show="item.state_bridge == '未施工'"
                                        class="gt_image_auto1"
                                    />
                                    <img
                                        src="../../assets/img/jdall/pin3_1.png"
                                        v-show="item.state_bridge == '施工中'"
                                        class="gt_image_auto1"
                                    />
                                    <img
                                        src="../../assets/img/jdall/pin_3_2.png"
                                        v-show="item.state_bridge == '已施工'"
                                        class="gt_image_auto1"
                                    />

                                    <!-- 圆 -->
                                    <div class="circleDiv">
                                        <div
                                            :class="[
                                                { circle: item.state_stake1 == '未施工' },
                                                { circle1: item.state_stake1 == '施工中' },
                                                { circle2: item.state_stake1 == '已施工' }
                                            ]"
                                            v-show="item.stake1 != null"
                                        >
                                            {{ item.stake1 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake2 == '未施工' },
                                                { circle1: item.state_stake2 == '施工中' },
                                                { circle2: item.state_stake2 == '已施工' }
                                            ]"
                                            v-show="item.stake2 != null"
                                        >
                                            {{ item.stake2 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake3 == '未施工' },
                                                { circle1: item.state_stake3 == '施工中' },
                                                { circle2: item.state_stake3 == '已施工' }
                                            ]"
                                            v-show="item.stake3 != null"
                                        >
                                            {{ item.stake2 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake4 == '未施工' },
                                                { circle1: item.state_stake4 == '施工中' },
                                                { circle2: item.state_stake4 == '已施工' }
                                            ]"
                                            v-show="item.stake4 != null"
                                        >
                                            {{ item.stake4 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake5 == '未施工' },
                                                { circle1: item.state_stake5 == '施工中' },
                                                { circle2: item.state_stake5 == '已施工' }
                                            ]"
                                            v-show="item.stake5 != null"
                                        >
                                            {{ item.stake5 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake6 == '未施工' },
                                                { circle1: item.state_stake6 == '施工中' },
                                                { circle2: item.state_stake6 == '已施工' }
                                            ]"
                                            v-show="item.stake6 != null"
                                        >
                                            {{ item.stake6 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake7 == '未施工' },
                                                { circle1: item.state_stake7 == '施工中' },
                                                { circle2: item.state_stake7 == '已施工' }
                                            ]"
                                            v-show="item.stake7 != null"
                                        >
                                            {{ item.stake7 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake8 == '未施工' },
                                                { circle1: item.state_stake8 == '施工中' },
                                                { circle2: item.state_stake8 == '已施工' }
                                            ]"
                                            v-show="item.stake8 != null"
                                        >
                                            {{ item.stake8 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake9 == '未施工' },
                                                { circle1: item.state_stake9 == '施工中' },
                                                { circle2: item.state_stake9 == '已施工' }
                                            ]"
                                            v-show="item.stake9 != null"
                                        >
                                            {{ item.stake9 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake10 == '未施工' },
                                                { circle1: item.state_stake10 == '施工中' },
                                                { circle2: item.state_stake10 == '已施工' }
                                            ]"
                                            v-show="item.stake10 != null"
                                        >
                                            {{ item.stake10 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake11 == '未施工' },
                                                { circle1: item.state_stake11 == '施工中' },
                                                { circle2: item.state_stake11 == '已施工' }
                                            ]"
                                            v-show="item.stake11 != null"
                                        >
                                            {{ item.stake11 }}
                                        </div>
                                        <div
                                            :class="[
                                                { circle: item.state_stake12 == '未施工' },
                                                { circle1: item.state_stake12 == '施工中' },
                                                { circle2: item.state_stake12 == '已施工' }
                                            ]"
                                            v-show="item.stake12 != null"
                                        >
                                            {{ item.stake12 }}
                                        </div>
                                    </div>
                                </div>
                                <div v-if="item.girder != null">
                                    <img
                                        src="../../assets/img/jdall/pin1.png"
                                        v-show="item.state_girder == '未施工'"
                                        width="195px"
                                        height="70px"
                                    />
                                    <img
                                        src="../../assets/img/jdall/pin1_1.png"
                                        v-show="item.state_girder == '施工中'"
                                        width="195px"
                                        height="70px"
                                    />
                                    <img
                                        src="../../assets/img/jdall/pin1_2.png"
                                        v-show="item.state_girder == '已施工'"
                                        width="195px"
                                        height="70px"
                                    />
                                    <p
                                        style="
                                            color: white;
                                            position: absolute;
                                            width: 195px;
                                            font-size: 18px;
                                            text-align: center;
                                            top: 2px;
                                        "
                                    >
                                        {{ item.girder }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';

export default {
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            hahashow: true,
            CunliangList1: [],
            bridge_name: '',
            bridge_id: 3,
            count_1: '',
            count_2: [],
            count_3: '',
            // 分段信息
            duan: [],
            // 分段详情
            duanShow: []
        };
    },
    methods: {
        // title 数字 点击 事件
        to(number) {
            this.cut(number);
        },
        /**
         * 切换显示状态
         * */
        cut(number) {
            for (let key in this.duan) {
                if (this.duan.hasOwnProperty(key)) {
                    this.duan[key].isShow = false;
                }
            }
            this.duan[number - 1].isShow = true;
        },
        /**
         * 获取墩柱数 获取梁总数 获取完成率
         * */
        getNumber() {
            let section_id = localStorage.getItem('section_id');
            ajax('Schedule/Count_Bridge', { section_id: section_id, bridge_name: this.bridge_name }, (data) => {
                this.count_1 = data;
                this.count_1.wcl = this.count_1.wcl.toFixed(1);
            });
            ajax('Schedule/Count_Stake', { section_id: section_id, bridge_name: this.bridge_name }, (data) => {
                this.count_2 = data;
                this.count_2.wcl = this.count_2.wcl.toFixed(1);
            });
            ajax(
                'Schedule/Count_Girder',
                {
                    section_id: section_id,
                    bridge_name: this.bridge_name
                },
                (data) => {
                    this.count_3 = data;
                    this.count_3.wcl = this.count_3.wcl.toFixed(1);
                }
            );
        },
        // 获取分段信息
        get_Schedule_Subsection() {
            let me = this;
            let section_id = localStorage.getItem('section_id');
            ajax(
                'Schedule/Subsection',
                {
                    section_id: section_id,
                    bridge_name: me.bridge_name
                },
                (data) => {
                    let arryNew = [];
                    data.map((item, index) => {
                        arryNew.push(Object.assign({}, item, { isShow: false }));
                    });
                    arryNew[0].isShow = true;
                    this.duan = arryNew;
                }
            );
        },
        // /Schedule/FindScheduleBySubsection 默认分段展示数据
        get_Schedule_FindScheduleBySubsection(pageNo) {
            // 先切换状态
            this.cut(pageNo);
            let section_id = localStorage.getItem('section_id');
            ajax(
                'Schedule/FindScheduleBySubsection',
                {
                    section_id: section_id,
                    bridge_name: this.bridge_name,
                    pageNo: pageNo,
                    pageSize: 30
                },
                (data) => {
                    console.log('分组展示数据', data);
                    this.duanShow = data;
                }
            );
        },
        // 页面初始化
        get_Schedule_FindScheduleBySubsection1(pageNo) {
            let section_id = localStorage.getItem('section_id');
            // this.cut(pageNo);
            ajax(
                'Schedule/FindScheduleBySubsection',
                {
                    section_id: section_id,
                    bridge_name: this.bridge_name,
                    pageNo: pageNo,
                    pageSize: 30
                },
                (data) => {
                    // 分组展示数据
                    this.duanShow = data;
                    console.log(this.duanShow);
                }
            );
        },
        CunliangList() {
            let me = this;
            let bridge_id = this.$route.query.id;
            me.bridge_id = bridge_id;
            if (bridge_id == undefined) {
                bridge_id = 3;
            }
        },
        CunliangList2() {
            let bridge_id = this.$route.query.id;
            let me = this;
            if (bridge_id == undefined) {
                bridge_id = 3;
            }
            console.log(bridge_id, 8989898);
            let section_id = localStorage.getItem('section_id');
            ajax('Girder/FindGirder', { section_id: section_id, bridge_id: bridge_id }, (data) => {
                me.CunliangList1 = data.data;
                me.bridge_name = data.bridge_name;
            });
        }
    },
    created() {
        this.CunliangList2();
    },
    mounted() {
        setTimeout(() => {
            this.CunliangList();
            let me = this;
            console.log(me.bridge_name + '427');
            let bridge_id = me.bridge_id;
            console.log(bridge_id);
            let bridge_name = me.bridge_name;
            console.log(bridge_name);
            if (bridge_id == undefined) {
                bridge_id = 3;
            }
            this.getNumber();
            this.get_Schedule_Subsection();
            // 分段展示数据
            this.get_Schedule_FindScheduleBySubsection1(1);
        }, 500);
    }
};
</script>
<style scoped>
#schart5 {
    margin-top: 25px;
    float: left;
    margin-left: 4px;
    width: 100%;
    height: 410px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.main {
    display: flex;
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
}

.liebiao {
    width: 100%;
    height: 845px;
    opacity: 1;
    background: url(../../assets/img/bei6.png) no-repeat;
    background-size: 100% 100%;
}

.left {
    width: 100%;
}

.h1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28px;
    opacity: 1;
    font-size: 30px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;
    text-align: left;
    color: #ffffff;
}

.textColor {
    color: #00fcff;
}

.divCicle {
    display: flex;
    width: 95%;
    margin: 0 auto;
}

/* 单元块 */
.bgflexc {
    flex: 1;
    width: 571px;
    padding-top: 35px;
    height: 273px;
    background: url(../../assets/img/jdall/bgK.png) no-repeat center center;
}

/* 下面的框 */
.content_bottom {
    width: 95%;
    margin: 0 auto;
    padding: 0 10px;
    height: 495px;
    background: #000d49;
    border: 5px solid #00fcff;
    border-radius: 25px;
}

/* 框内头部数字 */
.content_bottom_top {
    display: flex;
    width: 100%;
    line-height: 80px;
}

.content_bottom_top_felx {
    flex: 1;
    height: 46px;
    font-size: 40px;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
}

.centent_bottom_bottom {
    display: flex;
    margin-top: 20px;
}

.centent_bottom_bottom > div {
    display: flex;
    margin: 0px 10px;
}
.span_name {
    position: absolute;
    font-size: 30px;
    display: inline-block;
    text-align: center;
    top: 50px;
    width: 175px;
}

.yuan {
    width: 25px;
    height: 25px;
    opacity: 1;
    background: #00fcff;
    border: 3px solid #007eff;
    border-radius: 50%;
    display: inline-block;
}

.title {
    font-size: 50px;
    text-align: center;
}

.bigNumber {
    width: 80px;
    height: 39px;
    font-size: 40px;
    font-weight: 400;
    color: #ffffff;
    text-align: left;
}

.textZ {
    width: 50%;
    font-size: 30px;
    font-weight: 400;
    color: #ffffff;
    text-align: left;
}

.textZ > span {
    float: right;
    padding-right: 40px;
    text-align: left;
}

.inbloc {
    text-align: center;
}

.inbloc > div {
    display: inline-block;
    margin: 20px 0;
    width: 40%;
}

.colorGreen {
    color: #00804b;
}

.colorRed {
    color: #a42a00;
}

img {
    object-fit: cover;
}
/* 图片尺寸保留原大小,height-auto */
.gt_image_auto1 {
    width: auto;
    height: auto;
}

.circleDiv {
    width: 70px;
    height: 255px;
    opacity: 1;
    background: #7fd9ff;
    margin-left: 48px;
    padding: 0px 2px;
}

.circle {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
    background-color: #9e9e9e;
    text-align: center;
    font-size: 12px;
    line-height: 31px;
}
.circle1 {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
    font-size: 12px;
    line-height: 31px;
    text-align: center;
    background-color: #ff936e;
}
.circle2 {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 31px;
    background-color: #21ffa9;
}

/* 滚动条宽度 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    -moz-border-radius: 5px;
}

/* 滚动条轨道颜色 */
::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb:vertical {
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 12px;
    /*background-color: #BDBDBD;*/
    -webkit-border-radius: 6px;
}

/* 滚动条颜色 */
::-webkit-scrollbar-thumb {
    background-color: #68b7d6;
}

/* 鼠标移动到滚动条上后显示的颜色 */
::-webkit-scrollbar-thumb:hover {
    background-color: #009ffb;
}

/* 点击时滚动条的颜色 */
::-webkit-scrollbar-thumb:active {
    background-color: #5c99d3;
}
</style>